<script src="../../../router/index.js"></script>
<template>
  <div class="book-simple-box">
    <router-link
        class="img-box"
        :to="`/ContentDisplay/BookDetail/${bookData.id}?f=LocalHistory&code=local-history`"
    >
      <img :src="bookData.cover" alt=""/>
    </router-link>
    <div class="book-name">{{ bookData.title || '--'}}</div>
  </div>
</template>

<script>
export default {
  name: "BookSimpleLocalHistoryComponent",
  props: {
    bookData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
}
</script>

<style lang="less" scoped>
@import "../../../assets/global.less";
//phone
@media only screen and (max-width: 567px) {
  @width: 22vw;
  @height: 32vw;
  .book-simple-box {
    width: @width;
    height: @height;

    .img-box {
      width: @width;
      height: calc(@height - 5vw);

      img {
        width: @width;
        height: calc(@height - 5vw);
        object-fit: cover;
        box-shadow: 0 0 2px #6B000000;
      }
    }

    .book-name {
      width: @width;
      height: 5vw;
      line-height: 5vw;
      font-size: 2vw;
      font-weight: bold;
      color: black;
      .line-ellipsis(1);
      text-align: center;
    }
  }
}

//pc
@media only screen and (min-width: 576px) {
  .book-simple-box {
    @width: 80px;
    @height: 140px;
    width: @width;
    height: @height;
    cursor: pointer;

    .img-box {
      width: @width;
      height: calc(@height - 20px);
      display: block;

      img {
        width: @width;
        height: calc(@height - 20px);
        object-fit: cover;
        box-shadow: 0 0 2px grey;
      }
    }

    .book-name {
      width: @width;
      height: 20px;
      line-height: 20px;
      font-size: 8px;
      font-weight: bold;
      color: black;
      .line-ellipsis(1);
    }
  }

}

</style>
